<template>
  <Transition name="up">
    <div class="toasts" v-show="visible">
      {{ text }}
    </div>
  </Transition>
</template>
<script lang="ts">
import { ref, onMounted } from 'vue'
export default {
  name: 'toast',
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  setup () {
    const visible = ref(false)
    onMounted(() => {
      visible.value = true
    })
    return { visible }
  }
}
</script>
<style scoped lang="less">
.toasts {
  min-width: 580px;
  height: 110px;
  position: fixed;
  z-index: 9;
  left: 50%;
  top: 50%;
  background: rgba(17, 17, 17, 0.7);
  color: #fff;
  border-radius: 5px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transform: translate(-50%, -50%);
  padding: 30px 35px;
  line-height: 20px;
  white-space: pre;
  box-sizing: border-box;
}
.up-enter-from {
  bottom: 0;
  opacity: 0;
}
.up-enter-active {
  transition: all 0.5s;
}
.up-enter-to {
  opacity: 1;
  bottom: 16%;
}
</style>
